
@import 'nib'

$body-font-size = 14px

body
	padding 0
	margin 0 auto
	background rgb(60,130,210)
	font-size $body-font-size

img
	border none

a
	padding-bottom 0px
	color inherit
	border-bottom-color rgb(100, 100, 110) 
	border-bottom-style dotted 
	border-bottom-width 1px 
	text-decoration none
	& hover
		border-bottom 1px solid
	img
		border none

label
	color rgb(100,100,100) 
	font-style oblique 
	font-size smaller 
	
header.top
	width 100%
	background-color rgba(250, 250, 240, 0.5)
	
	color rgb(60, 60, 60)
	display block
	
	border-top-left-radius 0px 
	border-top-right-radius 0px 
	border-bottom-right-radius 100px 
	border-bottom-left-radius 100px 
	
	padding-bottom 10px 
	padding-top 15px 
	
	h1
		margin-left 40px   
	h2
		margin-left 60px   
		font-size 18px 
	
	details
		margin-left 100px
		summary
			color rgb(100, 100, 100)
	
	a
		color rgb(60, 60, 60) 
		border-bottom none 
	
	nav
		margin 0px
		padding 20px 
		background-color rgba(30,40,50,0.8) 
		color rgb(255,255,255) 
		vertical-align middle 
		position fixed 
		right 0% 
		top 10%
		box-shadow -2px 5px 8px #000000
		border 2px solid rgb(0,0,0)
		
		&:hover
			padding-left 30px
			color rgb(200,200,200)
			
			ul
				display block
				
		a
			color rgb(255,255,255)
			&:hover
				text-decoration underline
		ul
			paddign 0px
			margin 0px
			display  none
			margin-left 8px
			border-left 1px rgba(255,255,255,0.5) dotted 
			&:hover
				border-left 1px rgb(255,255,255) solid
			li 
				list-style none
				color white
				padding-left 1px
				font-size $body-font-size - 1px
				
				a
					color white
					&:hover
						text-decoration underline 

// main
section.main
	display block
	
	margin-left 0px 
	margin-top 30px 
	
	width 90% 
	min-width 800px 
	
	height 100% 
	min-height 400px 
	
	border-top-left-radius 0px 
	border-top-right-radius 110px 
	border-bottom-right-radius 110px 
	border-bottom-left-radius 0px 
	
	padding 20px 
	
	box-shadow0px 0px 25px #000  

	background linear-gradient(left, #e6f0a3, #d2e638, #c3d825 , #dbf043 )
	

//rss

p.rss
	position fixed 
	right 0px 
	bottom 10%
	&:hover
		transform scale(1.4) rotate(5deg)

//errors
.errorlist
	color red 
	font-size small 
	font-weight bold
	li
		list-style none 
		
.error
	color red 
	background-color rgba(255,100,100,1.0) 
	
//form
form
	display table 
	p
		padding-bottom 10px 
		label
			display table-cell 
			vertical-align top 
		
		input,textarea
			display table-cell 
			margin-left 4px 

//footer
footer.main
	width 100% 
	display table 
	text-align center 
		
	background-color rgba(250, 250, 240, 0.5) 
	
	border-top-left-radius 100px 
	border-top-right-radius 100px 
	border-bottom-right-radius 0px 
	border-bottom-left-radius 0px 
	
	margin-top  20px 
	
	details
		display table-cell
		
	p.validators
		width 110px 
		display table-cell 
		background-color rgba(200,200,255,0.6) 
		border-left dotted thin rgb(100,100,155) 
		padding-top 5px 
		padding-right 10px
		//-moz-border-radius-top-right 100px 
		border-top-right-radius 100px 

//pros  y contras
li
	.pro
		background-color rgba(100, 200, 100, 0.4) 
		border dotted 1px rgb(100, 200, 100) 
		list-style none 
	.con
		background-color rgba(200, 100, 100, 0.4) 
		border dotted 1px rgb(200, 100, 100) 
		list-style none 

.printbutton
	background none 
	border none 
	float right 
	a
		background none 
		border none 
		float right 

//category

section.category
	margin 0px
	padding 0px
	
	label
		text-transform none
		font-size  xx-small
		font-style  italic
		font-weight normal
		color  rgba(30,10,10,0.3)
		&:hover
			background-color  none

	header
		border-bottom  1px solid rgb(30,10,10)
		padding  5px	
		display  block
		margin-right 40px
		img.category
			border-radius 3px
			border-radius top right 40px
			position relative
			margin-top -100px
			height 100px
			float right
			vertical-align top

//categories
section.categories
	margin  0px
		
	ul
		margin 10px
		padding 0px
		border-left  1px dotted rgb(30,10,10)
		font-size $body-font-size - 1px
		li
			padding-left  2px
			list-style  none
			&:hover
				border-left  1px solid rgb(70,20,20)

//barra de navegación de categorías
nav.categories

	font-size  smaller
	
	label
		font-style  italic
		opacity  0.7
		font-size  smaller
	ul
		li
			display  inline
			list-style  none
			&:hover
				background-color  rgba(255,255,255,0.5)

//content

article.content
	display  block
	border-radius  top left 25px
	border-radius  top right 50px
	border-radius  bottom right 10px
	border-radius  bottom left 10px
	background  rgba(250,250,250,0.7)
	margin  10px
	color  rgb(30,30,30)
	
	header
		display  block
		padding 0px
		padding-left 10px
		padding-top 10px
		border-bottom  thin dotted rgba(30,30,30,0.4)
		font-size  smaller
		background  none
		h1 
			a
				text-decoration  none
				border-bottom  none
				&:hover
					text-decoration  underline

		details
			p 
				font-size smaller
				margin  0px
				display  table-cell
				padding-right  10px
				padding-left  10px
				border-right  thin dotted rgb(55,55,55)
				background  linear-gradient(right,  rgba(250,250,250,0.3) , rgba(250,250,250,0.6), rgba(250,250,250,0.3))


	//content-body
	div.content-body
		width  100%
		display  table-row
		
		div.description
			vertical-align  top
			display  table-cell
			padding-left  30px
			padding-right  10px
			padding-bottom  20px
			padding-top  30px
			
			p
				padding-bottom  15px

			ul
				padding-left  30px

		aside
			display  table-cell
			width  1%
			padding  10px
			vertical-align  middle

	//footer
	footer 
		border-top  thin dotted rgba(30,30,30,0.4)
		display  block
		padding-left  10px

		nav.share
			display  table-cell
			float  right
			border  none
			margin-right  10px

			a
				border  none
				padding  0px
				margin  0px
				vertical-align  bottom
				
				&:hover
					text-decoration  none
					border-bottom  1px rgb(0,0,0) dotted
					
				img
					height 20px
					&:hover
						transform  scale(1.3) rotate(10deg)
		// comment
		section.comments
			display  table
			font-size  small
			margin  20px
			
			h1
				font-size  smaller

			#comments
				dt
					margin-top  10px
					background-color  rgba(100,100,100,0.2)
					padding-left  4px
					padding-right  4px
					padding-top  2px
					padding-bottom  2px
				dd
					margin-bottom  10px
					background-color  rgba(100,100,100,0.1)
					padding-left  8px
					padding-right  8px
					padding-bottom  4px
					padding-top  4px
					font-style  italic
//barra de navegación de contenidos
nav.inline-list
	font-size  smaller
	label
		font-style  italic
		opacity  0.7
		font-size  smaller
	ul
		reset-box-model()
		list-style  none
		margin 3px
		li 
			display  inline
			a
				&:hover
					background-color rgba(255,255,255,0.5)
//code
.prettyprint
	padding  10px
	display  block
	border-radius  12px
	background-color  white
	box-shadow  0px 0px 5px #000000
	margin-top  8px

